<template>
  <div class="component-property">
    <el-tabs v-model="activeName">
      <el-tab-pane label="编码" name="first">
        <Coder v-model="state.code" ref="coder" :height="'480px'" language="html" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import elementResizeDetectorMaker  from 'element-resize-detector'
import { Coder } from '@daelui/vdog/dist/coder.js'
import defaults from './default.js'

export default {
  components: {
    Coder
  },

  props: {
    value: {
      type: Object,
      default () {
        return {
          code: defaults.code
        }
      }
    }
  },

  data () {
    return {
      activeName: 'first',
      state: {
        code: defaults.code
      }
    }
  },

  watch: {
    value: {
      handler () {
        this.syncState()
      },
      deep: true
    },
    'state.code': {
      handler () {
        this.syncValue()
      },
      deep: true
    }
  },

  methods: {
    syncState () {
      Object.assign(this.state, this.value)
    },
    syncValue () {
      Object.assign(this.value, this.state)
      this.$emit('update', this.state)
    }
  },

  mounted () {
    this.syncState()
    //监听元素变化
    let erd = elementResizeDetectorMaker()
    erd.listenTo(this.$el, () => {
      let monacoEditor = this.$refs.coder.monacoEditor
      monacoEditor && monacoEditor.layout()
    })
  }
}
</script>

<style lang="less" scoped>
.component-property {
  /deep/ .el-tabs__header {
    margin-bottom: 0;
  }
  /deep/ .el-tabs__nav {
    margin-left: 16px;
  }
}
</style>
